
  <template>
  <div class="bf-commont-template margin-t padding-t">
    <!-- <div style="padding: 0 16px ;">
        <h3>出行申请报销内页</h3>
        <p>该页面代码已经自动生成，按照普通码 表增删改查 为基础生成模板</p>
        <p>生成代码对应的 vue 文件路径：D:\Zmyitem\vue-element-admin\src\beneform4j\view\hr\attendancemanager\approve\detail.vue</p>
        <el-alert title="注意：表格内数据为模拟数据, 如果数据格式不对，请先进行格式转换。 模拟数据文件路径：src/mock/demo.js" type="warning"> </el-alert>
      </div> -->

    <div class="content  bf-form-none-border clearfix">
      <div class="top-one clearfix">
        <div class="clearfix">
          <div class="form-lable float-l">
            <label for="">申请名称</label>
          </div>
          <div class="form-input float-l">
            <!-- <el-input v-model="form.applyName" placeholder="请输入内容"></el-input> -->
            <span>{{form.applyName}}</span>
          </div>
        </div>
        <div class="clearfix">
          <div class="form-lable float-l">
            <label for="">外勤类型 </label>
          </div>
          <div class="form-input float-l">
            <!-- <el-input v-model="input" placeholder="请输入内容"></el-input> -->
            <span>{{form.outsideType}}</span>
          </div>
        </div>
        <div class="clearfix">
          <div class="form-lable float-l">
            <label for="">申请人</label>
          </div>
          <div class="form-input float-l">
            <!-- <el-input v-model="input" placeholder="请输入内容"></el-input> -->
            <span>{{form.employeeName}}</span>
          </div>
        </div>
        <div class="clearfix">
          <div class="form-lable float-l">
            <label for="">员工号</label>
          </div>
          <div class="form-input float-l">
            <!-- <el-input v-model="input" placeholder="请输入内容"></el-input> -->
            <span>{{form.employeeNo}}</span>
          </div>
        </div>
        <div class="clearfix">
          <div class="form-lable float-l">
            <label for="">所属部门</label>
          </div>
          <div class="form-input float-l">
            <!-- <el-input v-model="input" placeholder="请输入内容"></el-input> -->
            <span>{{form.orgName}}</span>
          </div>
        </div>
        <div class="clearfix">
          <div class="form-lable float-l">
            <label for="">岗位</label>
          </div>
          <div class="form-input float-l">
            <!-- <el-input v-model="input" placeholder="请输入内容"></el-input> -->
            <span>{{form.positionName}}</span>
          </div>
        </div>
        <div class="clearfix">
          <div class="form-lable float-l">
            <label for="">目的地</label>
          </div>
          <div class="form-input float-l">
            <!-- <el-input v-model="input" placeholder="请输入内容"></el-input> -->
            <span>{{form.destination}}</span>
          </div>
        </div>

        <div class="clearfix">
          <div class="form-lable float-l">
            <label for="">实际目的地</label>
          </div>
          <div class="form-input float-l">
            <!-- <el-input v-model="input" placeholder="请输入内容"></el-input> -->
            <span>{{form.realDestination}}</span>
          </div>
        </div>

        <div class="clearfix">
          <div class="form-lable float-l">
            <label for="">开始时间</label>
          </div>
          <div class="form-input float-l">
            <!-- <el-input v-model="input" placeholder="请输入内容"></el-input> -->
            <span>{{form.startDate}}</span>
            <span>{{form.startTime}}</span>
          </div>
        </div>
        <div class="clearfix">
          <div class="form-lable float-l">
            <label for="">结束时间</label>
          </div>
          <div class="form-input float-l">
            <!-- <el-input v-model="input" placeholder="请输入内容"></el-input> -->
            <span>{{form.endDate}}</span>
            <span>{{form.endTime}}</span>
          </div>
        </div>
      </div>

      <div class="margin-b">
        <div class="row-input clearfix">
          <div class="label float-l">
            出差事由
          </div>
          <div class="input float-l">
            <!-- <el-input v-model="input" placeholder="请输入内容"></el-input> -->
            <span>{{form.outsideCause}}</span>
          </div>
        </div>
      </div>

      <div class="margin-b">
        <div class="row-input clearfix">
          <div class="label float-l">
            工作开展情况
          </div>
          <div class="input float-l">
            <!-- <el-input v-model="input" placeholder="请输入内容"></el-input> -->
            <span>{{form.workDetail}}</span>
          </div>
        </div>
      </div>

      <div>
        <div class="table-header clearfix">
          <div>
            <span>目标客户</span>
          </div>
          <div>
            <!-- <span class="color" >新增</span> -->
          </div>
        </div>
        <div class="bf-div-table clearfix">
          <bf-table :data="data1" :setting="setting1" :hiddenPagination="true" ref="table"></bf-table>
        </div>
      </div>

      <div>
        <div class="table-header clearfix">
          <div>
            <span>实际客户</span>
          </div>
          <div @click="add2">
            <span class="color">新增</span>
          </div>
        </div>
        <div class="bf-div-table clearfix">
          <bf-table :data="data2" :setting="setting1" :hiddenPagination="true" :rowAction="rowAction2" ref="table"></bf-table>
        </div>
      </div>

      <div>
        <div class="table-header clearfix">
          <div>
            <span>报销费用</span>
          </div>
          <div>
            <span class="color" @click="add3">新增</span>
          </div>
        </div>
        <div class="bf-div-table clearfix">
          <bf-table :data="data3" :setting="setting3" :hiddenPagination="true" :rowAction="rowAction3" ref="table"></bf-table>
        </div>
      </div>
    </div>

    <!-- 目标-新增客户 -->
    <bf-table-add ref="bfTableAdd1" :title="'新增目标客户'" :editForm="setting1" @formSubmit="addSubmit1" :editRules="editRules1"></bf-table-add>
    <!-- 目标-编辑客户 -->
    <bf-table-edit ref="bfTableEdit1" :title="'编辑目标客户'" :editForm="setting1" @formSubmit="editSubmit" :editRules="editRules1"></bf-table-edit>

    <!-- 实际-新增客户 -->
    <bf-table-add ref="bfTableAdd2" :title="'新增实际客户'" :editForm="setting1" @formSubmit="addSubmit2" :editRules="editRules1"></bf-table-add>
    <!-- 实际-编辑客户 -->
    <bf-table-edit ref="bfTableEdit2" :title="'编辑实际客户'" :editForm="setting1" @formSubmit="editSubmit2" :editRules="editRules1"></bf-table-edit>

    <!-- 费用 -->
    <bf-table-add ref="bfTableAdd3" :title="'新增费用'" :editForm="setting3" @formSubmit="addSubmit3" :editRules="editRules"></bf-table-add>
    <!-- 费用 -->
    <bf-table-edit ref="bfTableEdit3" :title="'编辑费用'" :editForm="setting3" @formSubmit="editSubmit3" :editRules="editRules"></bf-table-edit>
    <div class="clearfix bottom-button">
      <div class="float-l padding-r padding-l" @click="stagedData(0)">
        <el-button type="primary">暂存</el-button>
      </div>
      <div class="float-l padding-r padding-l" @click="stagedData(1)">
        <el-button type="primary">提交</el-button>
      </div>
      <div class="float-l padding-r padding-l">
        <el-button @click="returnListPage">返回</el-button>
      </div>
    </div>

  </div>
</template>

<script>
// import request from '@/utils/request'
import { getOutSideDataApi, sendOutApplyApi, sendEditOutApplyApi } from './api'
export default {
  data() {
    return {
      searchData: '',
      input: '',
      form: {},
      data1: [],
      data2: [],
      data3: [],
      userData: {
      },
      rowAction2: [
        {
          label: '编辑',
          click: (item) => {
            const sta = this.dealStatus()
            if (!sta) {
              return
            }
            this.$refs.bfTableEdit2.show(item.scope.row)
          }
        },
        {
          label: '删除',
          click: (item) => {
            const sta = this.dealStatus()
            if (!sta) {
              return
            }
            let id
            if (item.scope.row.id) {
              id = item.scope.row.id
            } else {
              id = item.scope.row._addTimeId
            }
            this.data2.forEach((v, i) => {
              if (v.id == id || v._addTimeId == id) {
                this.data2.splice(i, 1)
              }
            })
          }
        }
      ],
      rowAction3: [
        {
          label: '编辑',
          click: (item) => {
            const sta = this.dealStatus()
            if (!sta) {
              return
            }
            // console.log(item)
            this.$refs.bfTableEdit3.show(item.scope.row)
          }
        },
        {
          label: '删除',
          click: (item) => {
            // console.log(item)
            const sta = this.dealStatus()
            if (!sta) {
              return
            }
            let id
            if (item.scope.row.id) {
              id = item.scope.row.id
            } else {
              id = item.scope.row._addTimeId
            }
            this.data3.forEach((v, i) => {
              if (v.id == id || v._addTimeId == id) {
                this.data3.splice(i, 1)
              }
            })
          }
        }
      ],
      setting1: [
        {
          field: 'cusNo',
          title: '客户号',
          type: 'selected',
          init: (form, item) => {
            // const options = []
            // getCustomersList().then(response => {
            //   if (response.success) {
            //     response.data.forEach(v => {
            //       const a = {
            //         name: v.cusName,
            //         value: v.cusNo
            //       }
            //       options.push(a)
            //     })
            //   }
            //   this.setting1.forEach(v => {
            //     if (v.field === 'cusNo') {
            //       v.options = options
            //     }
            //   })
            // })
          },

        },
        {
          field: 'cusName',
          title: '客户名称',
          type: 'text',
          searchable: true
        },
        {
          field: 'cusLinkman',
          title: '联系人',
          type: 'text'
        },
        {
          field: 'linkmanTel',
          title: '联系人电话',
          type: 'text',
          searchable: true
        },
        {
          field: 'cusAddr',
          title: '地址',
          type: 'text'
        },
        {
          field: 'remarks',
          title: '备注',
          type: 'text'
        }
      ],
      editRules1: {
        cusNo: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        cusName: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        linkmanTel: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        cusAddr: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        cusLinkman: [
          { required: true, message: '必填项', trigger: 'blur' }
        ]
      },
      setting3: [
        {
          field: 'costDate',
          title: '时间',
          type: 'date'
        },
        {
          field: 'costType',
          title: '费用类型',
          type: 'selected',
          isParams: true,
          paramsId: 'COSTTYPE'
        },
        {
          field: 'cost',
          title: '费用',
          type: 'text'
        },
        {
          field: 'remarks',
          title: '备注',
          type: 'text'
        }
      ],
      editRules: {
        costDate: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        costType: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        cost: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        remarks: [
          { required: true, message: '必填项', trigger: 'blur' }
        ]
      }
    }
  },
  mounted: function() {
    this.getOutSideData()
  },
  methods: {
    stagedData(status) {
      const sta = this.dealStatus()
      if (!sta) {
        return
      }
      const dealable = this.form.reimburseStatuis + ''

      this.form.reimburseStatuis = status + ''
      this.form.attendauceVisitList = []

      this.data1.forEach(v => {
        this.form.attendauceVisitList.push(v)
      })
      this.data2.forEach(v => {
        this.form.attendauceVisitList.push(v)
      })

      this.form.costBeanList = this.data3

      // 编辑
      if (dealable == '0') {
        sendEditOutApplyApi(this.form).then(response => {
          if (response.success) {
            this.$message({
              message: status == '0' ? '申请暂存成功' : '申请提交成功',
              type: 'success'
            })
            this.getOutSideData()
          }
        })
        return
      }
      if (dealable == 'undefined') {
        // 新增
        sendOutApplyApi(this.form).then(response => {
          if (response.success) {
            this.$message({
              message: status == '0' ? '申请暂存成功' : '申请提交成功',
              type: 'success'
            })
            this.getOutSideData()
          }
        })
      }
    },
    editSubmit3(form) {
      if (form.id) {
        this.data3.forEach(v => {
          if (v.id === form.id) {
            for (const key in form) {
              v[key] = form[key]
            }
          }
        })
        this.$refs.bfTableEdit3.hidden()
        return
      }
      if (form._addTimeId) {
        this.data3.forEach(v => {
          if (v._addTimeId === form._addTimeId) {
            for (const key in form) {
              v[key] = form[key]
            }
          }
        })
        this.$refs.bfTableEdit3.hidden()
      }
    },
    editSubmit2(form) {
      if (form.id) {
        this.data2.forEach((v, i) => {
          if (v.id === form.id) {
            // for(let key in form) {
            //   v[key] = form[key]
            // }
            this.data2.splice(i, 1, form)
          }
        })
        this.$refs.bfTableEdit2.hidden()
        return
      }
      if (form._addTimeId) {
        this.data2.forEach((v, i) => {
          if (v._addTimeId === form._addTimeId) {
            // for(let key in form) {
            //   v[key] = form[key]
            // }
            this.data2.splice(i, 1, form)
          }
        })
        this.$refs.bfTableEdit2.hidden()
      }
    },
    addSubmit3(form) {
      this.data3.push(form)
      this.hidden()
    },
    addSubmit2(form) {
      form.flag = 2
      const now = new Date()
      form._addTimeId = now.getTime()
      this.data2.push(form)
      this.hidden()
    },
    addSubmit1(form) {
      // console.log(form)
      form.flag = 1
      const now = new Date()
      form._addTimeId = now.getTime()
      this.data1.push(form)
      this.hidden()
    },
    hidden() {
      this.$refs.bfTableAdd1.hidden()
      this.$refs.bfTableAdd2.hidden()
      this.$refs.bfTableAdd3.hidden()
      this.$refs.bfTableEdit1.hidden()
      this.$refs.bfTableEdit2.hidden()
      this.$refs.bfTableEdit3.hidden()
    },
    showRowList1(commont) {
      // console.log(commont)
    },
    showRowList2(commont) {
      // console.log(commont)
    },
    showRowList3(commont) {
      // console.log(commont)
    },
    returnListPage() {
      this.$router.push(
        {
          path: '/c4688764-4745-4f73-8ec1-c505fcf014af/c4688764-4745-4f77-8ec1-c505fcf014af',
        }
      )
    },
    getOutSideData() {
      const id = this.$route.query.id
      const onlyShowDetail = this.$route.query.onlyShowDetail

      getOutSideDataApi(id).then(response => {
        if (response.data) {
          this.form = response.data
          let customer
          if (response.data.attendauceVisitList) {
            customer = response.data.attendauceVisitList
          } else {
            customer = []
          }
          this.data1 = []
          this.data2 = []
          customer.forEach(v => {
            if (v.flag === '1') {
              this.data1.push(v)
            }
            if (v.flag == '2') {
              this.data2.push(v)
            }
          })
          this.data3 = response.data.costBeanList
          if (onlyShowDetail) {
            this.form.reimburseStatuis = 0
          }
        } else {
          this.form = {}
        }
      })
    },
    searchList() {
      // request({
      //   url: '/demo/demo/demo',
      //   method: 'get'
      // }).then((response) => {
      //   this.userData = response
      // })
    },
    editSubmit(params, formType, formList) {
      // console.log(params, formType, formList)
    },
    pageChange(pageObj) {
      // console.log(pageObj)
    },
    showSearch() {
      this.$refs.table.showSearch()
    },
    showAdd() {
      this.$refs.table.showAdd()
    },
    quickSearch() {
      const params = {
        userId: this.searchData
      }
      console.log(params)
    },
    dealStatus() {
      const status = this.form.reimburseStatuis + ''
      const taskStatus = this.form.taskDefKey
      if (status == '1') {
        this.$message({
          message: '审批中，不可编辑和重复提交',
          type: 'error'
        })
        return false
      }

      if (status == '2') {
        this.$message({
          message: '审批通过中，不可编辑和重复提交',
          type: 'error'
        })
        return false
      }
      if (taskStatus == 'approve') {
        this.$message({
          message: '通过中，不可编辑和重复提交',
          type: 'error'
        })
        return false
      }
      return true
    },
    add2() {
      const dealable = this.dealStatus()
      if (dealable) {
        this.$refs.bfTableAdd2.show()
      }
    },
    add3() {
      const dealable = this.dealStatus()
      if (dealable) {
        this.$refs.bfTableAdd3.show()
      }
    },
    edit1() {
      const item = {
        name: '1',
        roleName: '1',
        introduction: '1',
        avatar: '1'
      }
      this.$refs.bfTableEdit1.show(item)
    },
    edit2() {
      const item = {
        name: '1',
        roleName: '1',
        introduction: '1',
        avatar: '1'
      }
      this.$refs.bfTableEdit2.show(item)
    },
    edit3() {
      const item = {
        name: '1',
        roleName: '1',
        introduction: '1',
        avatar: '1'
      }
      this.$refs.bfTableEdit3.show(item)
    },
    delete1() {
      this.$confirm('删除该条记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // this.$emit('editSubmit', this.deleteData, 'delete')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    delete2() {
      this.$confirm('删除该条记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // this.$emit('editSubmit', this.deleteData, 'delete')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    delete3() {
      this.$confirm('删除该条记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // this.$emit('editSubmit', this.deleteData, 'delete')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    }
  }
}
</script>

<style scoped>
.content {
  width: 1200px;
  margin: 0 auto;
}

.content input {
  border-top: none;
  border-radius: 0;
  border-right: none;
  border-left: none;
}

.top-one>div {
  width: 50%;
  float: left;
  margin-bottom: 22px;
}

.form-lable {
  width: 20%;
  text-align: right;
  margin-right: 50px;
  line-height: 32px;
  height: 32px;
}

.form-input {
  width: 60%;
  line-height: 32px;
  height: 32px;
  border-bottom: 1px solid #eee;
}

.other>div {
  width: 12.5%;
  text-align: center;
}

.bf-div-table {
  margin-bottom: 20px;
  padding: 0 50px;
}

.bf-div-table .header {
  background: #f5f8fa;
}

.bf-div-table .header>div {
  float: left;
  padding: 10px 0;
}

.bf-div-content>div {
  float: left;
  width: 12.5%;
  /* padding: 10px 0; */
  padding-left: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 36px;
  line-height: 36px;
}

.bf-div-content {
  border-top: none;
}

.row-input .label {
  width: 10%;
  text-align: right;
  margin-right: 34px;
  line-height: 32px;
}

.row-input .input,
.form-input {
  color: #888;
}

.row-input .input {
  width: 60%;
  line-height: 32px;
  height: 32px;
  border-bottom: 1px solid #eee;
}

.bf-div-table-action {
  display: flex;
  justify-content: space-around;
}

.bf-div-table-action>span {
  display: inline-block;
  cursor: pointer;
}

.bottom-button {
  display: flex;
  justify-content: center;
  padding-bottom: 40px;
  padding-top: 10px;
}

.table-header {
  padding: 0 70px;
  margin-bottom: 10px;
}

.table-header>div:first-child {
  float: left;
}

.table-header>div:last-child {
  float: right;
  cursor: pointer;
}

.cost-table>div {
  width: 16.66%;
}

.no-data {
  text-align: center;
  color: #aaa;
  padding-top: 10px;
  padding-bottom: 10px;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.data1>div {
  width: 14.285%;
}
</style>
